<template>
  <view class="main-box">
    <view class="img-container">
      <image
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
        src="../../../static/images/bgc_01.png"
      ></image>
      <view style="position:absolute;top:30rpx;right:40rpx">
         <image style="width:40rpx;height:40rpx" src="../../../static/images/photo.png" mode="scaleToFill" />
         <text style="color:#F0E5E5;position:relative;top:-6rpx;left:6rpx">{{userName}}</text>
      </view> 
    </view>
    <view class="containerBody">
		
   <!--    <view
        class="warning-time daily_down"
        style="font-size: 32rpx; font-weight: bold; margin: 0px 8rpx"
        v-if="doneDailyStatus"
      >
        今天日报已完成
      </view> -->
      <view class="warning-time" style="margin-top:40rpx" v-if="status==='未提交'">
        <text>距离填报日报时间还剩</text>
        <text class="time">
          {{ distanceDate }}
        </text>
      </view>
      <view v-else class="warning-time daily_down" style="margin-top:40rpx">{{status}}</view>
      <view  class="warning-time daily_down " style="color:#333;font-weight:bold">严禁填报涉密内容</view>
      <view class="content" style="padding: 0 30rpx; margin-top: 16rpx">
        <cmpFillCard
          style="flex: 1"
          :cardData="writeDailyData"
          @handleDaily="handleWriteDaily"
        />
      </view>
      <!-- <view class="content" style="padding: 0 30rpx; margin-top: 32rpx">
        <cmpFillCard
          style="flex: 1"
          :cardData="writeDailyData"
          @handleDaily="handleWriteDaily"
        />
      </view> -->
      <view style=" box-sizing: border-box; height: 126rpx;margin-top: 100rpx;">
        <image
          class="bottomImg"
          src="../../../static/images/bannerBom.png"
        ></image>
      </view>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
  </view>
</template>
<script>
import cmpFillCard from '../../../components/cmp-fill-card.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import {
  getDetailSysEndTime,
  getClerkSelectDailyList,
  countdown
} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      status:"",
      doneDailyStatus: false,
      timeShow: false,
      timer: null,
      timeData: '',
      distanceDate: '',
      timeData: {},
      writeDailyData: {
        title: '写日报',
        info: '填写当日日报',
        count: 200,
        height: '190rpx',
        imgSrc: '../../../static/images/write_daily.png',
      },
      editDailyData: {
        title: '改日报',
        height: '190rpx',
        info: '修改文书提交日报',
        count: 4,
        imgSrc: '../../../static/images/edit_daily_a.png',
      },
      userName:''
    }
  },
  mounted(){
    this.userName=this.$store.state.userInfo.userName 
  },
  onShow() {
    countdown({userId:this.userInfo.userId}).then(res=>{
      this.status=res.data.status
    })
    this.countDown()
    getClerkSelectDailyList({
      userId: this.userInfo.userId,
    }).then((res) => {
      const arr = res.data
      if (arr.length > 0) {
        const newData = arr.filter((item) => {
          return item.status == '1' || item.flag == '1'
        })
        if (newData.length > 0) {
          this.doneDailyStatus = false
        } else {
          this.doneDailyStatus = true
        }
      }
    })
    getDetailSysEndTime().then((timeRes) => {
      this.timeData = timeRes.data.endTime
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  onUnload() {
    clearInterval(this.timer)
  },
  onHide() {
    clearInterval(this.timer)
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  onLoad: () => {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  methods: {
    countDown() {
      this.timer = setInterval(() => {
        let now = new Date()
        let year = now.getFullYear()
        let month = now.getMonth() + 1 //js从0开始取
        let date = now.getDate()
        let deadlineStr = year + '/' + month + '/' + date + ' ' + this.timeData
        let start = moment(new Date()) //获取开始时间
        let end = moment(new Date(deadlineStr)) //结束时间
        let diff = end.diff(start) //时间差
        if (diff > 0) {
          this.timeShow = true
        } else {
          this.timeShow = false
        }
        this.distanceDate = `${
          (Math.abs(moment.duration(diff).hours()) > 0
            ? moment.duration(diff).hours() + '时'
            : '') +
          (Math.abs(moment.duration(diff).minutes()) > 0
            ? moment.duration(diff).minutes() + '分'
            : '') +
          moment.duration(diff).seconds() +
          '秒'
        }` //格式化为需要的格式 这里是时分秒
      }, 1000)
    },
    onChange(e) {
      this.timeData = e
    },
    handleEditDaily() {
      uni.navigateTo({
        url: '/pagesB/secretary-daily/daily-edit-list/index',
      })
    },
    handleWriteDaily() {
      uni.navigateTo({
        url: '/pagesB/secretary-daily/daily-write-detail/index',
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  components: {
    cmpFillCard,
    cmpTabBar,
  },
  watch: {
    $route: {
      handler(newRouter) {
        clearInterval(this.timer)
      },
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.img-container {
  width: 100%;
}
.topImg {
}
.containerBody {
  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
  }
  .warning-time {
    height: 54rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 32rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  width: 100%;
  bottom: -6rpx;
}
.daily_down {
  font-size: 32rpx;
  font-weight: bold;
  margin: 0px 8rpx;
}
</style>
